<template>
  <div class="dashboard-container">
    <div class="headerNav">
      <el-row>
        <el-col :span="6">
          <div class="nav">
            <div class="nav-con">
              <img :src="nav[0].img" alt="">
              <p>待办（<i>11</i>）</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="nav">
            <div class="nav-con">
              <img :src="nav[1].img" alt="">
              <p>消息（<i>10</i>）</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="nav">
            <div class="nav-con">
              <img :src="nav[2].img" alt="">
              <p>参数人员</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="nav">
            <div class="nav-con">
              <img :src="nav[3].img" alt="">
              <p>活动查询</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="dashboard-main">
      <div>
        <el-row>
          <el-col :span="8">
            <el-card :body-style="{padding:'0px',}" class="box-card">
              <div slot="header">
                <span style="font-weight:bold;font-family:'微软雅黑';font-size:18px;">活动列表</span>
              </div>
              <div class="text item">
                <p>text这是一个活动 </p>
                <i>2016.10.1</i>
              </div>
              <div class="text item">
                <p>texttext这是一个活动 </p>
                <i>2016.10.1</i>
              </div>
              <div class="text item">
                <p>text这是一个活动........... </p>
                <i>2016.10.1</i>
              </div>
              <div class="text item">
                <p>text这是一个活动text这是一个活动 </p>
                <i>2016.10.1</i>
              </div>
              <div class="text item">
                <p>ttext这是一个活动text这是动 </p>
                <i>2016.10.1</i>
              </div>
            </el-card>
          </el-col>
          <el-col :span="15" :offset="1">
            <!-- <guanzhudu></guanzhudu> -->
          </el-col>
        </el-row>
      </div>
      <div>
        <!-- <el-row>
          <el-col :span="15">
            <activeType></activeType>
          </el-col>
          <el-col :span="8" :offset="1">
            <activeZuoping></activeZuoping>
          </el-col>
        </el-row> -->
      </div>
      <div>
        <!-- <el-row class="actiyeType" style="background-color:#fff;margin-top:30px;">
          <el-col :span="7"> <areaFenxi></areaFenxi> </el-col>
          <el-col :span="7" :offset="1"><peopleFenxi></peopleFenxi></el-col>
          <el-col :span="7" :offset="1"><sexFenxi></sexFenxi></el-col>
        </el-row> -->
      </div>
    </div>
  </div>
</template>

<script>
import inco_1 from '@/assets/index_images/images/inco_1.png'
import inco_2 from '@/assets/index_images/images/inco_2.png'
import inco_3 from '@/assets/index_images/images/inco_3.png'
import inco_4 from '@/assets/index_images/images/inco_4.png'
export default {
  name: 'dashboard',
  data(){
    return {
      nav:[
        {img:inco_1},
        {img:inco_2},
        {img:inco_3},
        {img:inco_4},
      ]
    }
  },
  created(){

  },
  methods:{

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-container{
    background-color:#f5f5f5;
    padding-bottom:30px;
    .headerNav{
      height:100px;
      padding-top:31px;
      margin-right:30px;
      .nav{
        margin-left:30px;
        height:100px;
        background-color:#fff;
        border: 1px solid #e6ebf5;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-radius: 4px;
        cursor:pointer;
        .nav-con{
          height:50px;
          width:80%;
          margin:0 auto;
          padding-top:25px;
          img{
            width:50px;
            height:50px;
            float:left;
            margin-right:30px;
          }
          p{
            float:left;
            display:block;
            height:50px;
            color:#2398EC;
            i{
              font-style:normal;
              color:red;
            }
          }
        }
      }
    }
    .dashboard-main{
      margin:50px 30px 0 30px;
      .box-card{
        .text{
          padding:0 20px;
          cursor:pointer;
          font-size:14px;
          p{
            display:inline-block;
            width:75%;

          }
          i{
            display:inline-block;
            font-style:normal;
            width:20%;
            color:#2398EC;
          }
        }
        .text:hover{
          background-color:#ccc;
        }
      }
    }
    .actiyeType{
        border: 1px solid #e6ebf5;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        color: #2d2f33;
        border-radius: 4px;
    }
  }
</style>
